<template>
	<!-- 这个页面需要修改请求  -->
	<div>
		<div class="background">
			<ul class="masonry">
				<!-- 获取数据 -->
				<li v-for="(item, index) in FoodsMenuList" :key="index" @click="JumpFoodsDetail(item)">
					<div class="item">
						<img :src="getImages(item.largeImg)" alt="" />
						<h1 class="van-ellipsis">{{ item.cpName }}</h1>
						<p>{{ item.des }}</p>
						<div class="love_item">
							<i
								class="iconfont"
								:class="{ 'icon-aixinD': !item.flag, 'icon-dianzan-aixinshixin': item.flag }"
								@click.stop="changeLoveColor(item.flag, index)"
							>
							</i>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FoodClassificationList',
	props: ['FoodsMenuList'],
	data() {
		return {};
	},
	methods: {
		/**
		 * @method 修改收藏爱心颜色
		 * @param {Boolean} flag 收藏状态
		 * @param {Number} index 索引
		 *  */
		changeLoveColor(flag, index) {
			if (!this.FoodsMenuList[index].flag) {
				this.$set(this.FoodsMenuList[index], 'flag', !flag);
			}
			this.$set(this.FoodsMenuList[index], 'flag', !flag);
		},
	},
};
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}
.background {
	background: rgb(255, 255, 255);
}
ul {
	padding: 0 10px;
}
ul li {
	list-style: none;
	padding: 5px;
}
.masonry {
	column-count: 2;
	column-gap: 0;
}
.item {
	position: relative;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
}
.item img {
	width: 100%;
	display: block;
	height: auto;
	pointer-events: none;
}
.item h1 {
	width: 100%;
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
	font-size: 20px;
}

.item p {
	width: 80%;
	position: absolute;
	bottom: 15px;
	left: 10px;
	color: #fff;
	font-weight: 600;
	font-size: 10px;
	/* 超过两行省略号 */
	text-indent: 1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 这里是超出几行省略 */
	overflow: hidden;
	text-overflow: ellipsis;
}
.love_item {
	width: 10%;
	position: absolute;
	bottom: 15px;
	right: 10px;
}
.love_item i {
	color: #fff;
	font-size: 20px;
}
.love_item .icon-dianzan-aixinshixin {
	color: orangered;
}
</style>
